<!--后厨物资管理-设备管理-添加/编辑桌面秤设备/模态框-->
<template>
  <div>
    <cus-modal
      ref="modal"
      :title="form.id ? '编辑' : '添加'"
      width="380"
      @on-visible-change="onVisibleChange"
      @onOk="onOk"
    >
      <Form
        ref="formValidate"
        :model="form"
        :rules="ruleValidate"
        :label-width="100"
      >
      <FormItem
          label="设备号:"
          v-if="!form.id"
          prop="serialNo"
          :rules="{ required: true, message: '设备号不能为空', trigger: 'blur'}"
        >
          <Input
            v-model="form.serialNo"
            maxlength="20"
            style="width: 200px"
            placeholder="请输入设备号"
          ></Input>
        </FormItem>
        <FormItem
          label="设备名称:"
          prop="name"
          :rules="{ required: true, message: '设备名称不能为空', trigger: 'blur'}"
        >
          <Input
            v-model="form.name"
            maxlength="20"
            style="width: 200px"
            placeholder="请输入设备名称"
          ></Input>
        </FormItem>
        <FormItem
          label="使用部门:"
          prop="useDept"
          :rules="{ required: true, message: '使用部门不能为空', trigger: 'blur'}"
        >
          <Input
            v-model="form.useDept"
            maxlength="20"
            style="width: 200px"
            placeholder="请输入使用部门"
          ></Input>
        </FormItem>
        <FormItem
          label="IP地址:"
          prop="ip"
          :rules="[{
            required: true,
            message: 'IP地址不能为空',
            trigger: 'blur',
          },{
            required: true,
            pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
            message: 'IP地址错误',
            trigger: 'blur',
          }]"
        >
          <Input
            v-model="form.ip"
            maxlength="20"
            style="width: 200px"
            placeholder="请输入IP地址"
          ></Input>
        </FormItem>
      </Form>
      <Spin size="large" fix v-if="loading"></Spin>
    </cus-modal>
  </div>
</template>

<script>
import { addDevice, updateDevice } from "@/api/business/manager";

const form = {
  id: "",
  name: "", // 设备名称
  serialNo:"",// 设备号
  ip:"",//ip地址
  useDept:"",//使用部门

};
export default {
  components: {},
  name: "",
  data() {
    return {
      loading: false,
      form: form,
      ruleValidate: {},
    };
  },
  mounted() {
    this.form = this.$cu.deepClone(form);
  },
  methods: {
    onVisibleChange(v) {
      this.$refs["formValidate"].resetFields();
      if (!v) this.form = this.$cu.deepClone(form);
    },
    show() {
      this.loading = false;
      this.$refs["modal"].show = true;
    },
    onOk() {
      this.$refs["formValidate"].validate((valid) => {
        if (valid) {
            if(this.form.id) {
                console.log('edit')
                this.updateDeviceApi();
            } else {
                console.log('add')
                this.addDeviceApi();
            }
        }
      });
    },
    //保存桌面秤数据--------接口
    addDeviceApi() {
        return new Promise((resolve) => {
        let params = {
          name: this.form.name, //秤名
          serialNo: this.form.serialNo, //秤号
          ip: this.form.ip, //ip地址
          useDept: this.form.useDept, //使用部门
        };
        addDevice(params).then((res) => {
            this.form.loading = false;
          if (res.retCode == 2000) {
            this.$Message.success(res.retMsg)
            this.$refs["modal"].show = false;
            this.$parent.onInit();//刷新列表
          } 
          resolve();
        });
      });
    },
    //编辑桌面秤数据
    updateDeviceApi() {
        return new Promise((resolve) => {
        let params = {
          id: this.form.id,
          name: this.form.name, //秤名
          serialNo: this.form.serialNo, //秤号
          ip: this.form.ip, //ip地址
          useDept: this.form.useDept, //使用部门
        };
        updateDevice(params).then((res) => {
            this.form.loading = false;
          if (res.retCode == 2000) {
            this.$Message.success(res.retMsg)
            this.$refs["modal"].show = false;
            this.$parent.onInit();//刷新列表
          } 
          resolve();
        });
      });
    }
  },
};
</script>

<style scoped lang="less">
</style>
